<template>
    <div class="hunter_talent-choose">
        <div class="global-flex-center">{{ bpAll.pickHun }}</div>
        <div class="name_space global-flex-center">{{ teamInfo[hunterTeamKey]?.hunter }}</div>
        <div class="talent-container">
            <div class="talent_item global-flex-center" :class="talentReactive.dp ? 'active' : ''"
                @click="toggleTalent('dp')">
                <img src="../../assets/images/talent/底牌.png">
            </div>
            <div class="talent_item global-flex-center" :class="talentReactive.zk ? 'active' : ''"
                @click="toggleTalent('zk')">
                <img src="../../assets/images/talent/张狂.png">
            </div>
            <div class="talent_item global-flex-center" :class="talentReactive.wl ? 'active' : ''"
                @click="toggleTalent('wl')">
                <img src="../../assets/images/talent/挽留.png">
            </div>
            <div class="talent_item global-flex-center" :class="talentReactive.jbkj ? 'active' : ''"
                @click="toggleTalent('jbkj')">
                <img src="../../assets/images/talent/禁闭空间.png">
            </div>
        </div>
    </div>
</template>

<script setup lang='ts' name="HunterTalentChoose">
import { deepClone } from '@/utils';
import storeHelper from '@/utils/TauriStore';

const props = defineProps<{
    teamInfo: Partial<TeamInfo>;
    hunterTeamKey: 'team1' | 'team2'
    bpAll: Record<string, string | null>;
    canOperation: boolean
}>();
interface HunterTalent {
    dp: boolean,
    zk: boolean,
    wl: boolean,
    jbkj: boolean
}
const talentReactive = reactive<HunterTalent>({
    dp: false,
    zk: false,
    wl: false,
    jbkj: false
})
const toggleTalent = (key: keyof HunterTalent) => {
    if(!props.canOperation) return;
    talentReactive[key] = !talentReactive[key];
}
// 存储
const postHunTalentMessage = () => {
    return new Promise(async (resolve) => {
        const constructorMap = {
            hunTalent: deepClone(talentReactive), //监管天赋对象；
            hunPlayerName: props.teamInfo[props.hunterTeamKey]?.hunter ?? 'unknown', //求生者名称0-3
            hunChar: props.bpAll.pickHun //监管者角色
        };
        await storeHelper.set('hasTalentHun', constructorMap);
        resolve('ok');
    })

}
defineExpose({
    postHunTalentMessage
})
</script>
<style scoped lang='scss'>
.hunter_talent-choose {
    width: 50%;
    border: 1px solid #e7e7e7;
    display: grid;
    grid-template-rows: 60px 20px 35px;
    margin: 1em 0;

    .name_space {
        font-size: 0.8em;
        background: #000;
        color: #fff;
    }

    .talent-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);

        .talent_item {
            width: 100%;
            height: 35px;
            background: #999;
            cursor: pointer;
            transition: 0.57s all;

            &.active {
                background: #4090EF;
            }

            img {
                width: 30px;
                height: 30px;
            }
        }
    }

}
</style>